এই অধ্যায়ে আপনি 2D transform এর মাধ্যমে একটি এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা শিখবেন।
সিএসএস(৩) transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে আপনি একটি এলিমেন্টের উপর বিভিন্ন প্রভাব(effect) ফেলতে পারেন।
সুতরাং ট্রান্সফর্মেশন এর মাধ্যমে আপনি একটি এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করতে পারবেন।
translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। আমরা translate() মেথডে দুটি প্যারামিটার ব্যবহার করতে পারি। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্দেশ করে।
নিম্নের উদাহরণে আমরা <div> এলিমেন্টটিকে বর্তমান অবস্থান থেকে ডানে ৩০ পিক্সেল এবং নিচে ৩০ পিক্সেল সরাবোঃ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস translate() মেথড এর উদাহরণ</title>
<style>
div {
width: 90%;
height: auto;
background-color: orange;
-ms-transform: translate(30px,30px); /* ইন্টারনেট এক্সপ্লোরার ৯ এর জন্য */
-webkit-transform: translate(30px,30px); /* সাফারি ব্রাউজারের জন্য */
transform: translate(30px,30px); /* স্ট্যান্ডার্ড সিন্ট্যাক্স */
}
</style>
</head>
<body>
<div>translate() মেথড একটি এলিমেন্টের বর্তমান পজিশন পরিবর্তন করে।
এই div এলিমেন্টটি বর্তমান পজিশন থেকে ডান দিকে 30 পিক্সেল এবং নিচে 30 পিক্সেল সরে গেছে।</div>
</body>
</html>
সিএসএস(৩) translate মেথডসমূহঃ
সিএসএস(৩) rotate() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার দিকে অথবা বিপরীত দিকে ঘুরায়।
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস rotate() মেথড এর উদাহরণ</title>
<style>
div {
width: 90%;
height: auto;
background-color: orange;
border: 2px dotted yellow;
}
#textbox {
transform: rotate(15deg);
}
</style>
</head>
<body>
<div>এটি একটি স্বাভাবিক div এলিমেন্ট </div>
<div id="textbox"> rotate() মেথড একটি এলিমেন্টকে ঘড়ির কাঁটার দিকে বা বিপরীত দিকে ঘুরায়।
এই div এলিমেন্টটি ঘড়ির কাঁটার দিকে ১৫ ডিগ্রি ঘুরে গেছে।</div>
</body>
</html>
rotate() মেথডে নেগেটিভ ভ্যালু ব্যবহার করলে এটি একটি এলিমেন্টকে ঘড়ির কাটার বিপরীত দিকে ঘুরায়।
<!DOCTYPE html>
<html>
<head>
<title> rotate() মেথডে নেগেটিভ ভ্যালুর ব্যবহার</title>
<style>
div {
width: 90%;
height: auto;
background-color: orange;
border: 2px dotted yellow;
}
#textbox {
transform: rotate(-15deg);
}
</style>
</head>
<body>
<div>এটি একটি স্বাভাবিক div এলিমেন্ট।</div>
<div id="textbox">এই div এলিমেন্টটি ঘড়ির কাঁটার বিপরীত দিকে ১৫ ডিগ্রি ঘুরে গেছে।</div>
</body>
</html>
সিএসএস(৩) rotate মেথডঃ
সিএসএস(৩) scale() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করে।
<!DOCTYPE html>
<html>
<head>
<title>scale() মেথডের মাধ্যমে 2D Transformation </title>
<style>
div {
margin: 100px;
width: 200px;
height: auto;
padding: 5px;
background-color: orange;
transform: scale(2,2);
}
</style>
</head>
<body>
<div>এই div এলিমেন্টের width এবং height প্রকৃত div এলিমেন্টের দ্বিগুন হয়েছে।</div>
<p>scale() মেথড একটি এলিমেন্টের আকার(size) বৃদ্ধি অথবা হ্রাস করতে পারে।</p>
</body>
</html>
সিএসএস(৩) skew() মেথড প্রদত্ত কোণদ্বয় অনুযায়ী X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টর অবস্থান তির্যকভাবে পরিবর্তন করে।
নিম্নের উদাহরণে আমরা <div> এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে ১০ডিগ্রী এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রী পরিবর্তন করবোঃ
<!DOCTYPE html>
<html>
<head>
<title>skew() মেথড</title>
<style>
div {
width: 90%;
height: auto;
background-color: orange;
}
#textbox {
transform: skew(10deg,15deg);
}
</style>
</head>
<body>
<p>skew() মেথড প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্টকে skew করে।</p>
<div>স্বাভাবিক div এলিমেন্ট</div>
<div id="textbox">এই div এলিমেন্টটি X-অক্ষের সাপেক্ষে ১০ডিগ্রি এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রি skewed হয়েছে।</div>
</body>
</html>
skew() মেথডের মধ্যে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির ভ্যালু ডিফল্টভাবে শূন্য হয়।
নিম্নের উদাহরণে skew() মেথডে একটি মাত্র প্যারামিটার ব্যবহার করায় <div> এলিমেন্টেটি শুধুমাত্র X-অক্ষের সাপেক্ষে ১৫ডিগ্রী তির্যক ভাবে ঘুরবেঃ
<!DOCTYPE html>
<html>
<head>
<title>skew() মেথড</title>
<style>
div {
width: 90%;
height: auto;
background-color: orange;
}
div#textbox {
transform: skew(15deg);
}
</style>
</head>
<body>
<p>skew() মেথড প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্টকে skew করে।</p>
<div>স্বাভাবিক div এলিমেন্ট</div>
<div id="textbox">এই div এলিমেন্টটি X-অক্ষের সাপেক্ষে ১৫ডিগ্রি skewed হয়েছে।</div>
</body>
</html>
সিএসএস(৩) skew মেথডসমূহঃ
সিএসএস(৩) matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যায়।
matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।
ম্যাট্রিক্স এর গঠনঃ
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())kt_satt_skill_example_id=1606
সিএসএস(৩) matrix মেথডঃ
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
